<template>
  <div class="container">
    <h2 class="setting-header">
      <strong>回收站</strong>
    </h2>
    <el-tabs v-model="queryData.type" @tab-click="handleTabClick">
      <el-tab-pane label="我的资源" :name="1"></el-tab-pane>
      <el-tab-pane label="共享资源" :name="2"></el-tab-pane>
    </el-tabs>
    <div class="table-box">
      <!-- <RuifoxTable :loading="tableLoading" :default-index="true" :default-checkbox="false" v-model:tableData="tableData" v-model:fieldList="fieldList">
        <template #title="{ element }">
          <div class="file-item">
            <div class="thumb-box" v-if="element.modelId == 1">
              <img class="thumb-img" :src="element.resourceData?.url" alt/>
            </div>
            <img class="file-img" v-else :src="getAvatarUrl(element.modelId)" alt />
            <span v-if="!element.modelId" class="file-name" @click="handleFileClick(element)">{{ element.name }}</span>
            <span v-else class="file-name" @click="handleFileClick(element)">{{ element.resourceData.title }}</span>
          </div>
        </template>
        <template #deleteTime="{ element }">
          <span v-if="!element.modelId">{{ element.deleteTime || '-' }}</span>
          <span v-else>{{ element.resourceData.deleteTime || '-' }}</span>
        </template>
        <template #type="{ element }">
          <span>{{ toShowType(element.modelId) }}</span>
        </template>
        <template #options="{ element }">
          <div class="table-td-option">
            <el-button v-permission="['setting:dataSource:list:delete']" type="primary" link @click="handleRecover(element.id)">恢复</el-button>
            <el-button v-permission="['setting:dataSource:list:delete']" type="danger" link @click="handleDelete(element.id)">删除</el-button>
          </div>
        </template>
      </RuifoxTable>-->
      <RuifoxTable :loading="tableLoading" :default-index="true" :default-checkbox="false" v-model:tableData="tableData" v-model:fieldList="fieldList">
        <template #title="{ element }">
          <div class="file-item">
            <!-- <div class="thumb-box" v-if="element.modelId == 1">
              <img class="thumb-img" :src="element.resourceData?.url" alt />
            </div> -->
            <img class="file-img" :src="getAvatarUrl(element.modelId)" alt />
            <span class="file-name" @click="handleFileClick(element)">{{ element.title }}</span>
          </div>
        </template>
        <template #deleteTime="{ element }">
          <span>{{ element.deleteTime || '-' }}</span>
        </template>
        <template #type="{ element }">
          <span>{{ toShowType(element.modelId) }}</span>
        </template>
        <template #filePath="{ element }">
          <span>{{ element.path ? handleShowFilePath(element.path) : '-' }}</span>
        </template>
        <template #options="{ element }">
          <div class="table-td-option">
            <el-button v-permission="['setting:dataSource:list:delete']" type="primary" link @click="handleRecover(element)">恢复</el-button>
            <el-button v-permission="['setting:dataSource:list:delete']" type="danger" link @click="handleDelete(element.id)">删除</el-button>
          </div>
        </template>
      </RuifoxTable>
      <div class="header-page">
        <PaginationView
          :total="queryData.total"
          :pageSize="queryData.pageSize"
          :currentPage="queryData.currentPage"
          :allChoose="isAllChooseBtn"
          :pageChoose="isPageChooseBtn"
          :canChoose="false"
          :checkedNum="checkedNum"
          @changeSize="handleSizeChange"
          @currentChange="handleCurrentChange"
          @changePageChoose="handlePageChoose"
          @changeAllChoose="handleAllChoose"
          @invertChoose="handleInvertChoose"
          @refreshList="getTableData"
          @cancelChoose="handleResetPagination"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { selectPage, recoverList, deleteList } from '@/api/resourceRecycle'
import { ElMessage, ElMessageBox } from 'element-plus'
import { tableList as mixTable } from '@ruifox-cms/utils'
import { getModelList } from '@/api/model'

const {
  queryData,
  tableData,
  tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  getTableData,
  handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  handleResetPagination,
} = mixTable({
  getListApi: selectPage,
})

const fieldList = ref([
  {
    title: '名称',
    name: 'title',
  },
  {
    title: '删除时间',
    name: 'deleteTime',
  },
  {
    title: '类型',
    name: 'type',
  },
  {
    title: '路径',
    name: 'filePath',
    showTextTip: true,
    minWidth: 500,
  },
  {
    title: '操作',
    width: 120,
    fixed: 'right',
    name: 'options',
  },
])

// 搜索条件
const defaultQueryData = reactive({
  type: 1, // 1:文件夹资源 2: 共享资源
})
Object.assign(queryData, defaultQueryData)

const handleShowFilePath = (val) => {
  console.log(1111, val)
  let arr = JSON.parse(val)
  return arr.reverse().map((item) => item.name).join('/')
}
const handleTabClick = () => {
  setTimeout(() => {
    handleSearch()
  }, 0)
}
// 模型类型列表
const modelList = ref([])
const modelListLoading = ref(false)
const getModelListAsync = async () => {
  modelListLoading.value = true
  let res = await getModelList().finally(() => {
    modelListLoading.value = false
  })
  if (res.code === 20000) {
    modelList.value = res.data
  }
}
getModelListAsync()
// 反显文件类型
const toShowType = (modelId) => {
  let obj = modelList.value.find((item) => item.id == modelId)
  return obj ? obj.name : '-'
}
// 文件图标
const getAvatarUrl = (type) => {
  if (type) {
    try {
      // return require(`@/assets/sourceManage/${type}.svg`)
      return require(`@/assets/sourceManage/9.svg`)
    } catch (e) {
      return require(`@/assets/sourceManage/9.svg`)
    }
  } else {
    return require(`@/assets/sourceManage/folder.svg`)
  }
}
// 恢复
const handleRecover = async (val) => {
  try {
    await ElMessageBox.confirm(`确定要恢复到 ‘‘${val.path ? handleShowFilePath(val.path) : '默认' }’’ 位置吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    let res = await recoverList({ idList: [val.id] })
    if (res.code == 20000) {
      handleResetPagination()
      getTableData()
      ElMessage({
        showClose: true,
        message: `恢复成功`,
        type: 'success',
      })
    }
  } catch (e) { 
    console.log('取消操作')
  }

}
// 删除
const handleDelete = async (id) => {
  let res = await deleteList({ idList: [id] })
  if (res.code == 20000) {
    handleResetPagination()
    ElMessage({
      showClose: true,
      message: `删除成功`,
      type: 'success',
    })
    getTableData()
  }
}
onMounted(() => {
  handleSearch()
})
</script>
<style scoped lang="scss">
.container {
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 15px;
  h2 {
    font-weight: normal;
    margin-bottom: 20px;
    strong {
      font-size: 18px;
      font-weight: bold;
      margin-right: 20px;
    }
  }
  .search-wrap {
    margin-bottom: 10px;
    .top-btn {
      display: flex;
    }
  }
  .table-box {
    .file-item {
      display: flex;
      align-items: center;
      .file-img {
        width: 18px !important;
        height: 18px !important;
        margin-right: 5px;
      }
    }
    .running-url {
      display: flex;
      flex-direction: column;
      a {
        span {
          color: $mainColor;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>
